<template>
    <div class="textCom">
      <div class="left">
        <div class="Box">
          <div class="allCount">席位总数</div>
          <div class="num">586</div>
        </div>
        <div class="Box">
          <div class="allCount">车厢总数</div>
          <div class="num">8</div>
        </div>
        <div class="Box">
          <div class="allCount">限乘人数</div>
          <div class="num">646</div>
        </div>
        <div class="Box">
          <div class="allCount">无座人数</div>
          <div class="num">60</div>
        </div>
      </div>
      <div class="right" v-if="right">
        <div class="Box">
          <div class="allCount">每车限乘人数</div>
          <div class="num1">
            <el-input-number v-model="num" :min="1" @change="" />
          </div>
        </div>
        <div class="Box1">
          <div class="allCount">无座位数</div>
          <div class="num">10</div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from "vue";
  
  let { right } = defineProps(["right"]);
  const num = ref(1);
  </script>
  
  <style lang="scss" scoped>
  .textCom {
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      display: flex;
    }
    .Box {
      .num {
        font-size: 14px;
        color: #303849;
      }
      .allCount {
        font-size: 14px;
        color: #80879b;
        margin-right: 5px;
      }
      height: 100%;
      margin-right: 30px;
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
    }
    width: 100%;
    height: 16px;
    line-height: 16px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }
  .el-input-number {
    width: 120px;
  }
  .Box1 {
    display: flex;
    line-height: 30px;
    .num {
      font-size: 14px;
      color: #303849;
    }
    .allCount {
      font-size: 14px;
      color: #80879b;
      margin-right: 5px;
    }
  }
  </style>
  